<template>
  <div class="div-hezi">
    <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
      <el-form-item label="标题" prop="title">
        <el-input v-model="formData.title" placeholder="请输入盘点计划标题" clearable :style="{ width: '100%' }">
        </el-input>
      </el-form-item>
      <el-form-item label="责任部门" prop="deptId">
        <el-select v-model="formData.deptId" @change="handleChange(formData.deptId)" placeholder="请选择盘点计划部门" clearable
          :style="{ width: '100%' }">
          <el-option v-for="(item, index) in deptList" :key="index" :label="item.deptName" :value="item.deptId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="主要负责人" prop="headId">
        <el-select v-model="formData.headId" placeholder="请选择主要负责人" clearable :style="{ width: '100%' }">
          <el-option v-for="(item, index) in UserList" :key="index" :label="item.userName" :value="item.userId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="日期范围" prop="Time">
        <el-date-picker type="daterange" v-model="formData.Time" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
          :style="{ width: '100%' }" start-placeholder="开始日期" end-placeholder="结束日期" range-separator="至" clearable>
        </el-date-picker>
      </el-form-item>
      <el-form-item size="large">
        <el-button type="primary" @click="submitForm">新增任务</el-button>
        <!-- <el-button @click="handlequit">取消计划</el-button> -->
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { getsystemlist, getuserlist } from "@/api/equipment/equipment.js";
import { postStktaking, getChlidrenStktaking, putStktaking } from "@/api/Inventory/Inventory.js";
export default {
  components: {},
  props: [],
  data () {
    return {
      formData: {
        title: undefined,
        deptId: undefined,
        headId: undefined,
        Time: null,
      },
      deptList: [],
      UserList: [],
      rules: {
        title: [{
          required: true,
          message: '请输入盘点计划标题',
          trigger: 'blur'
        }],
        deptId: [{
          required: true,
          message: '请选择盘点计划部门',
          trigger: 'change'
        }],
        headId: [{
          required: true,
          message: '请选择主要负责人',
          trigger: 'change'
        }],
        Time: [{
          required: true,
          message: '日期范围不能为空',
          trigger: 'change'
        }],
      },
    }
  },
  computed: {},
  watch: {},
  created () {
    this.getList()
  },
  mounted () { },
  methods: {
    async getList () {
      let params = await getsystemlist({ status: 0 })//部门
      this.deptList = params.data
    },
    /**
     * 修改进入
     * @param {修改参数} row 
     */
    async updateIP (row) {
      let data = await getChlidrenStktaking(row.planId)
      this.formData = { ...data.data, Time: [] }
      this.formData.Time.push(data.data.startTime)
      this.formData.Time.push(data.data.endTime)
      this.title = '修改计划'
      this.handleChange(this.formData.deptId)
    },
    async handleChange (val) {
      let params = await getuserlist({ deptId: val })//负责人
      this.UserList = params.data
    },
    submitForm () {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        // TODO 提交表单
        if (this.title === '修改计划') {//修改
          let params = {
            ...this.formData,
            startTime: this.formData.Time[0],
            endTime: this.formData.Time[1]
          }
          putStktaking(params).then(() => {
            this.$emit('Chlidren', this.formData.planId)
          })
        } else {
          let params = {
            ...this.formData,
            startTime: this.formData.Time[0],
            endTime: this.formData.Time[1]
          }
          postStktaking(params).then(res => {
            this.$emit('Chlidren', res.data.planId)
          })
        }

      })
    },
    resetForm () {
      this.$refs['elForm'].resetFields()
    },
    handlequit () {
      this.$emit('clone')
    }
  }
}

</script>

<style lang="scss" scoped>
.div-hezi {
  width: 35%;
}
</style>
